<template>
  <el-tree default-expand-all highlight-current 
  :current-node-key="610" :data="oData" node-key="id" :props="defaultProps" ref="tree" @node-click="handleNodeClick"></el-tree>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

import { getCurrentInstance, ref, reactive, toRefs,defineComponent } from "vue";


export default defineComponent  ({
    props: {
      treeData:{
          type:Array,
          default:()=>[]
      },
      defaultProps:{
          type:Object,
          default:()=>{}
      }
  },
  data(){
      return{
          oData:[]
      }
  },
  created(){
      let oData = JSON.parse(JSON.stringify(this.treeData))
      oData.map((item:any,i:number)=>{
          item.id = Number(i+1);
          if(item.children){
              item.children.map((msg:any,ind:number)=>{
                  msg.id = Number(`${i+1}${ind}`)
                  if(msg.children){
                      msg.children.map((json:any,index:number)=>{
                          json.id = Number(`${i+1}${ind}${index}`)
                      })
                  }
              })
          }
      })
      this.oData = oData;
    
  },
   methods: {
      handleNodeClick(data:any) {
        console.log(data);
      }
    }
})
</script>